<template>
  <div>
    <!--    面包屑导航区-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>博客管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="card1" shadow="never" style="text-align: left">
      <div class="el-card__header" style="text-align: left;padding: 0;">
        <h1 style="margin: 0;">博客管理</h1>
      </div>
      <div class="dflex-b margin-top-sm">
        <el-button type="primary" @click="handleAdd">撰写博客</el-button>
        <div class="dflex ">
          <el-input class="margin-right-xs"  placeholder="请输入标题" clearable v-model="queryParams.kwd" ></el-input>
          <el-select v-model="queryParams.typeId" clearable placeholder="请选择分类" style="margin-right: 20px">
            <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
      </div>
      <el-table :data="list" border stripe>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div class="blog-information">
              <el-row :gutter="20">
                <el-col class="left-item" :sm="12" :lg="8">
                  <el-card shadow="never">
                    <div class="firstPicture">
                      <h1 style="margin: 5px auto">博客首图 &nbsp;&nbsp;
                        <el-button size="mini" circle type="primary" @click="showUploadPop(scope.row)">
                          <i class="el-icon-edit"></i>
                        </el-button>
                      </h1>
                      <el-image class="img" :src="scope.row.firstPicture"></el-image>
                    </div>
                  </el-card>
                </el-col>
                <el-col class="middle-item" :sm="12" :lg="8">
                  <el-card shadow="never">
                    <h1 style="margin: 5px auto">描述</h1>
                    <div style="word-break:break-all;">{{ scope.row.description }}</div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="ID"
            prop="id"
            align="center"
            width="100">
        </el-table-column>
        <el-table-column label="标题" prop="title">
          <template slot-scope="scope">
            <p @click="go2BlogDetail(scope.row.id)" class="change-type">{{ scope.row.title }}</p>
          </template>
        </el-table-column>
        <el-table-column label="封面图片" prop="picUrl" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.firstPicture" class="image-sm"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="分类" prop="type.name" width="110px">
          <template slot-scope="scope">
            <div @click="showTypePop(scope.row)" class="change-type">
              {{ scope.row.typeName }}
              <i class="el-icon-edit"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="标签" prop="tags" width="250px">
          <template slot-scope="scope">
            <el-tag size="medium" v-for="(tag, i) in scope.row.tagList" :key="tag.id" closable
                    @close="handleDelTag(scope.row,tag)">{{ tag.name }}
            </el-tag>
            <el-button size="mini" class="button-new-tag" @click="showTagPop(scope.row)"> + New
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="阅读量" prop="views" width="70px" align="center"></el-table-column>
        <el-table-column label="更新时间" prop="updateTime" width="150px">
          <template slot-scope="scope">
            {{ scope.row.updateTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="90px">
          <template slot-scope="scope">
            <!--            修改按钮-->
            <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                circle
                @click="handleEdit(scope.row)"
            ></el-button>
            <!--            删除按钮-->
            <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                circle
                @click="handleDel(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum"
          :total="total">
      </el-pagination>
      <AEditBlogTypeDialog :is-show.sync="isShowTypePop" :is-edit="true" :info="typeInfo"
                           @complete="refresh"></AEditBlogTypeDialog>
      <DragUpload :is-show.sync="isShowUploadPop" :info="uploadInfo" @complete="handleUpdateBlogInfo"></DragUpload>
      <el-dialog title="添加标签" :visible.sync="isShowTagPop">
        <el-form :model="tagForm">
          <el-form-item label="标签名称" label-width="120px">
            <el-select
                v-model="tagForm.name"
                filterable
                allow-create
                default-first-option
                placeholder="请选择或创建标签">
              <el-option
                  v-for="item in tagList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isShowTagPop = false">取 消</el-button>
          <el-button type="primary" @click="handleAddTag">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  reqBlogList,
  reqDelBlog,
  reqAllTagList,
  reqAllTypeList,
  reqEditBlog,
  reqAddBlogTag,
  reqDelBlogTag
} from '../../api/adminApi'
import AEditBlogTypeDialog from '@/views/admin/dialog/AEditBlogTypeDialog.vue'
import DragUpload from '@/components/DragUploadDialog.vue'

const defQuery = () => {
  return {
    kwd: '',
    typeId: null,
    tagId: null,
    pageNum: 1,
    pageSize: 10
  }
}
export default {
  components: { DragUpload, AEditBlogTypeDialog },
  data() {
    return {
      queryParams: defQuery(),
      list: [],
      total: 0,
      commentList: [],
      typeList: [],
      tagList: [],
      isShowTypePop: false,
      isShowTagPop: false,
      isShowUploadPop: false,
      typeInfo: {},
      uploadInfo: {},
      blogInfo: {},
      tagForm: {},
    }
  },
  created() {
    this.getList()
    this.getTypeList()
    this.getTagList()
  },
  methods: {
    refresh() {
      this.getList()
    },
    handleSearch(){
      this.getList()
    },
    // 获取博客列表
    getList() {
      reqBlogList(this.queryParams).then(data => {
        this.list = data.list
        this.total = data.total
      })
    },
    getTypeList() {
      reqAllTypeList().then(data => {
        this.typeList = data
      })
    },
    // 得到所有的标签
    getTagList() {
      reqAllTagList().then(data => {
        this.tagList = data
      })
    },
    // 编辑博客
    handleEdit(item) {
      this.$router.push({
        path: "/admin/blog/edit",
        query: { id: item.id }
      })
    },
    handleAdd(){
      this.$router.push("/admin/blog/add")
    },
    /**
     * 删除博客
     * @param id
     */
    handleDel(id) {
      this.$confirm(
          '此操作将永久删除该博客, 是否继续',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(() => {
        reqDelBlog(id).then(data => {
          this.$message.success('删除博客成功！')
          this.getList()
        })
      })
    },

    /**
     * 修改博客首图
     * @param event
     */
    handleUpdateBlogInfo(event) {
      if (!event || !event.length) {
        return
      }
      reqEditBlog({ id: this.blogInfo.id, firstPicture: event[0] }).then(data => {
        this.isShowUploadPop = false
        this.list.forEach(it => {
          if (it.id == this.blogInfo.id) {
            it.firstPicture = event[0]
          }
        })
        this.$message.success('修改封面成功！')
      })
    },
    showUploadPop(item) {
      this.blogInfo = item
      this.isShowUploadPop = true
    },

    /**
     * 跳转到博客详情页
     * @param id
     */
    go2BlogDetail(id) {
      this.$router.push({ path: '/blogInfo', query: { id: id } });
    },
    showTypePop(item) {
      this.typeInfo = item
      this.isShowTypePop = true
    },
    showTagPop(item) {
      this.tagForm = { id: item.id }
      this.isShowTagPop = true
    },

    /**
     * 创建新标签
     */
    handleAddTag() {
      if (!this.tagForm.name) {
        this.$message.warning("tag名称不能为空")
        return
      }
      const newTag = this.tagList.find(item => item.name == this.tagForm.name.trim())
      //console.log(newTag)
      //1是新建,2是选择已存在的
      let params = { type: 1, ...this.tagForm }
      if (newTag) {
        params.tagId = newTag.id
        params.type = 2
      }
      reqAddBlogTag(params).then(data => {
        this.$message.success('添加成功！')
        this.isShowTagPop = false
        this.getList()
        this.getTagList()
      })
    },

    /**
     * 删除对应的参数可选项
     * @param row
     * @param tag
     */
    handleDelTag(row, tag) {
      reqDelBlogTag({ id: row.id, tagId: tag.id }).then(data => {
        this.$message.success('删除成功！')
        this.getList()
        this.getTagList()
      })
    },
    handleCurrentChange(pageNum) {
      this.queryParams.pageNum = pageNum
      this.getList()
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.getList()
    },
  }
}
</script>

<style scoped lang="less">
.el-tag {
  margin: 2px;
}

.blog-information {
  width: 100%;

  .firstPicture {
    text-align: center;

    h1 {
      display: flex;
      justify-content: center;
      align-items: center;

      .el-button {
        margin-left: 20px;
      }
    }

    /*padding-right: 20px;*/
    /*border-right: 1px dashed #999;*/
    /*box-sizing: border-box;*/

    .img {
      margin: 10px 0;
      width: 90%;
      border-radius: 10px;
    }
  }

  .middle-item {
    /*padding-right: 20px;*/
    /*border-right: 1px dashed #999;*/
    height: 100%;
    /*box-sizing: border-box;*/

    h1 {
      text-align: center;
    }

  }

  .right-item {
    /*margin-left: 20px;*/

    .comment {
      border-bottom: 1px dashed #ccc;
      margin: 10px 0;
      display: flex;
    }

    .el-avatar {
      width: 35px;
      height: 35px;
      border: 2px solid white;
      box-shadow: 0 0 10px 2px rgba(0, 0, 0, .06);
      flex-shrink: 0;
    }

    .content {
      text-align: left;
      font-size: 14px;
      flex-grow: 1;

      .nkname {
        margin-left: 10px;
        max-width: 530px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        .rp, .date {
          color: #999;
          margin-left: 10px;
        }

        .blog {
          color: #349edf;
          margin-left: 10px;
        }
      }

      .reply {
        margin-left: 10px;
      }

      .op {
        color: #ddd;
        font-weight: lighter;

        .rep {
          color: #349edf;
        }

        .del {
          color: red;
        }
      }

      .op:hover {
        cursor: pointer;
      }
    }
  }
}

.change-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.change-type:hover {
  cursor: pointer;
  color: #409eff;
}

@media screen and (max-width: 748px) {
  .el-input, .el-select {
    width: 100% !important;
    margin-bottom: 20px;
  }

  .blog-information {
    .left-item {
      width: 40%;
    }

    .middle-item {
      width: 30%;
    }

    .right-item {
      width: 30%;
    }
  }
}

</style>
